<template>
    <div>
        <div class="loginContent">
            <div class="loginFormBox">
                <van-form label-width="50px">
                    <van-field
                            v-model="form.phone"
                            name="手机号"
                            label="手机号"
                            type="tel"
                            placeholder="手机号"
                            :rules="[{ required: true, message: '' }]"
                    />
         <!--           <van-field
                            v-model="form.code"
                            name="验证码"
                            label="验证码"
                            placeholder="验证码"
                            :rules="[{ required: true, message: '' }]"
                    >
                        <template #button>
                            <van-button  @click="getCodeBtn" :disabled = "btnDisabled" ref="pass" size="small" type="primary">{{innerText}}</van-button>
                        </template>
                    </van-field>-->
                    <van-field
                            v-model="form.password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '' }]"
                    />
                    <div style="margin: 16px;">
                        <van-button @click="submitBtn" round block type="info" native-type="submit">登 录</van-button>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>

<script>
import {Toast} from "vant";
import {login} from "@/utils/request"
export default {
  // 这是这个是要作为公共组件进行传值的属性
  props:{
    formInputOne:String,
    formInputTwo:String,
    formAa:String,
    formLoginBtn:String,
    typeVal:String
  },
  data () {
    return {
            btnDisabled:false,
            innerText:'获取验证码',
            form: {
                phone: '',
                password: '',
            },
        }
    },
  methods:{
    telcheck(tel){
				if(tel==""){this.errorTextOne='手机号码不能为空 '; return false}
				let re = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				tel=tel.replace(/\s+/g,'').replace(/-/g,''); 
				if(!re.test(tel)){this.errorTextOne='手机号码格式不正确';return false}
				return re.test(tel);
	},
    forget(){
           this.$router.push('resetPassWord')
    },
    getCodeBtn(){
        let bt = this.$refs.pass;
        let countdown = 60;
        time_out(bt,countdown);
        var that = this;
        function time_out(bt,countdown) {
            if (countdown == 0) {
                bt.disabled = false;
                bt.innerText="获取验证码";
                countdown = 60;
            } else {
                bt.disabled = true;
                bt.innerText="重新发送(" + countdown + ")";
                countdown--;
                setTimeout(function() { time_out(bt,countdown) },1000);
            }
        }
    },
    submitBtn(){
        let params = {
            phone: this.form.phone,
            password: this.form.password
        };
        if (!params.phone || !params.password) {
            return;
        }
        if (params.phone.length !== 11) {
            return Toast.fail('手机号不正确');
        }
        login(params).then(res => {
            console.log(res)
            if (res.code === 200) {
                let token = (res || {}).data;
                this.$store.commit('setToken', token);
                this.$router.push({
                    path: '/personal'
                });
            } else {
                Toast.fail(res.msg || '请求失败');
            }
        })
    },
    // 验证表单第一个文本框
    testInputOne(){
        if (this.$refs.inputOne.placeholder == '请输入手机号') {
            // 验证手机号规则
           this.telcheck(this.inputOne)
        }else{
            // 输入赚钱码
            if(this.inputOne==""){
                this.errorTextOne = '赚钱码不能为空'
            }
            else{
                this.errorTextOne = '';
            }
        }
    },
    // 验证表单第二个文本框
    testInputTwo(){
        if(this.inputTwo == ''){
            this.errorTextTwo = '输入值不能为空';
        }else{
            this.errorTextTwo = '';
        }

    }

  }
}
</script>

<style lang='less'>
</style>
